<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script src="js/highcharts.src.js"></script>
        <script src="js/exporting.js"></script>
        <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
        <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
		<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
    
        // define the options
        var options = {
    
            chart: {
                renderTo: 'container'
            },
    
            title: {
                text: 'Annonces immobilieres'
            },
    
            subtitle: {
                text: '----Sous titre ----'
            },
    
            xAxis: {
                type: 'datetime',
                tickInterval: 24 * 3600 * 1000, // day
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            },
    
            yAxis: [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }],
    
            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },
    
            tooltip: {
                shared: true,
                crosshairs: true
            },
    
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX,
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
                                        this.y +' visits',
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },
    
            series: [{
                name: 'Prix affiché',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }]
        };
    
    
        // Load data asynchronously using jQuery. On success, add the data
        // to the options and initiate the chart.
        // This data is obtained by exporting a GA custom report to TSV.
        // http://api.jquery.com/jQuery.get/
        jQuery.get('graph', null, function(tsv, state, xhr) {

            // set up the two data series
            points = [];

            // all data lines start with a double quote
            for (i = 0 ; i < tsv.length ; i++) {
                date = Date.parse('2012-08-0' + (i+1));
                obj = tsv[i];
                points.push([date,obj.price]);
            }
    
            options.series[0].data = points;
            //options.series[1].data = newVisitors;
    
            chart = new Highcharts.Chart(options);
        }, 'json');
    });
    
});
		</script>

       <title>Test charts leboncoin</title>
    </head>
    <body>
       <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">Chargement des données...</div>
    </body>
</html>
